<template>
  <navbar></navbar>
  <router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition || 'fade'">
      <div class="page">
        <component :is="Component" :key="route.fullPath" />
      </div>
    </transition>
  </router-view>
  <tabbar></tabbar>
</template>

<script lang="ts" setup>
import tabbar from '@/components/tabbar.vue';
import navbar from '@/components/navbar.vue';
</script>

<style lang="scss">
.page {
  height: calc(100vh - 50px);
  background-color: #f8f8f8;
}
</style>
